<template>
  <div>
    <div class="box-width">
      <img src="http://qiniu.prod.fita-club.com/web/search-banner.jpg" style="display: block; width: 100%;">
    </div>

    <div class="search-layout">
      <div class="container box-width clearfix search-setion">
        <form class="search-form">
          <div class="item row">
            <div class="col-2">
              <div class="name">国家</div>
              <div class="input-layout">
                <input id="countryEle" style="width: 100%; line-height: 30px; background: transparent;" @click="countryShow=true" v-model="selectedCountryName">
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
             <div class="col-2">
              <div class="name">品牌</div>
              <div class="input-layout select-layout">
                <v-select id="brandEle"
                  :clearable="false"
                  :options="suppliers"
                  :noDrop="supplierDrop"
                  label="chinese_name"
                  @search:focus="onSearchBrand"
                  v-model="selectedsupplier"
                ></v-select>
              </div>
            </div>
            <div class="col-2">
              <div class="name">取车地点</div>
              <div class="input-layout">
                <input id="pickupSiteEle" style="width: 100%; line-height: 30px; background: transparent;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden"
                  @click="hotCitiesShow('pickup')" v-model="selectedCityName">
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <div class="name">还车地点</div>
              <div class="input-layout">
                <input id="returnSiteEle" style="width: 100%; line-height: 30px; background: transparent;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;"
                  @click="hotCitiesShow('return')" v-model="returnCityName">
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <div class="name">取车时间</div>
              <div class="input-layout">
                <flat-pickr
                  class="form-control datetimepickr"
                  :config="config"
                  value="pickupDate"
                  v-model="pickupDate"
                  @on-close="doSomethingOnClose"
                ></flat-pickr>
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <div class="name">还车时间</div>
              <div class="input-layout">
                <flat-pickr
                  class="form-control datetimepickr"
                  :config="config"
                  v-model="returnDate"
                ></flat-pickr>
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
          </div>
          <div class="item row">
            <div class="col-2">
              <div class="name">年龄</div>
              <div class="input-layout select-layout">
                <v-select :options="driverAge" :reduce="value => value.code" label="value" :clearable="false" v-model="ageSelected"></v-select>
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <div class="name">预付/到付</div>
              <div class="input-layout select-layout">
                <v-select id="typeEle" :options="typeOptions"
                label="payName"
                :reduce="payName => payName.payCode"
                :clearable="false"
                :noDrop="typeDrop"
                @search:focus="onSearchType"
                placeholder="请选择付款方式"
                v-model="selectedType"
                ref='typeSelect'
                ></v-select>
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <div class="name">套餐</div>
              <div class="input-layout select-layout">
                <v-select id="categoriesEle"
                  :options="setCategories"
                  label="chinese_name"
                  :reduce="chinese_name => chinese_name.id"
                  :noDrop="categoriesDrop"
                  @search:focus="onSearchCategories"
                  placeholder="请选择套餐"
                  :value="selectedCategoryVal"
                  v-model="selectCategories"
                  :clearable="false"
                  ref="categorySelect"
                ></v-select>
                <i class="iconfont icon-down-arrow"></i>
              </div>
            </div>
            <div class="col-2">
              <button type="button" @click.stop="searchResult" class="btn search-btn">搜索</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="">
      <div class="search-tab box-width text-center">
        <div class="item">
          <v-select
            :options="carTypeOpt"
            :clearable="false"
            @search:blur="filterCars"
            :reduce="chineseName => chineseName.code"
            label="chineseName"
            v-model="selectedTypeVal"
          ></v-select>
        </div>
        <div class="item">
          <v-select
            :clearable="false"
            :options="carSiteOpt"
            @search:blur="filterCars"
            :reduce="name => name.value" label="name"
            v-model="selectedSiteVal"
          ></v-select>
        </div>
        <div class="item">
          <v-select
            :clearable="false"
            :options="carPriceOpt"
            @search:blur="appendCarPrice"
            :reduce="name => name.value" label="name"
            v-model="selectedPriceVal"
          ></v-select>
        </div>
        <span class="iconfont" :class="priceStatu ? 'icon-eye' : 'icon-eye-close'" @click="togglePriceStatu" style="padding: 10px; font-size: 20px; font-weight: bold;position: absolute; right: 40px; top: 50%; margin-top: -25px;"></span>
      </div>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="countryEle">
        请先选择国家
      </b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="brandEle">
        请先选择品牌
      </b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="pickupSiteEle">
        请先选择取车地点
      </b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="returnSiteEle">
        请先选择还车地点
      </b-tooltip>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="typeEle">
        请先选择支付类型
      </b-tooltip>
    </div>
    <div class="list-layout" v-if="result.setCategories">
      <div class="box-width container" style="padding: 0;">
        <div class="row">
          <div class="col-3 type-description" >
            <div class="type">
              <div class="type-title">{{result.setCategories[result.sets[0].categoty].chinese_name}}</div>
              <div class="text" >
                <p class="no-margin" :key="key" v-for="(value, key) in result.sets[0].content_map">{{value}}</p>
              </div>
              <div class="text" style="margin-top: 10px;">{{result.pickupLocation.airport_location_description ? '门店位于' + result.pickupLocation.airport_location_description : ''}}{{result.pickupLocation.airport_location_description ? '，' : ''}}{{result.pickupLocation.shuttle_service_cn_description}}</div>
            </div>
            <div class="tips">
              <div class="text">
                <p class="no-margin">* 取、还车以当地时间为准</p>
                <p class="no-margin">* 所示价格只适合中国、香港、澳门地区的护照 和驾照持有者</p>
                <p class="no-margin">* 若预付订单客户提前还车，未使用天数不予 退款</p>
                <p class="no-margin">* 浮动价将不定时更新，常规价为常年适用价格</p>
                <p class="no-margin">* 服务热线：+86-21-63758388</p>
                <button v-if="!$store.getters.getMobile" @click="gotoLoginPage" class="no-margin btn search-btn" style="background-color: #b39265;color: white;display: block;margin: 1rem auto">代理登录</button>
              </div>
            </div>
          </div>
          <div class="col-9 car-list">
            <div v-if="(vehicleCores.length == 0 && hasVehicleCores)" class="col-12 list-item text-center" >
              暂无数据
            </div>
            <div :key="index" v-for="(vc, index) in ((vehicleCores && hasVehicleCores) ? vehicleCores : result.vehicleCores)" class="col-12 list-item" >
              <div class="img-cover">
                <img :src="vc.picture">
              </div>
              <div class="description">
                <div class="title">{{vc.model_name}}</div>
                <div class="subtitle">{{vc.model_code_class_desc}}/ {{vc.category_code_desc}}/ {{vc.transmission_type === 'MANUAL' ? '手动' : '自动'}}/ {{vc.baggage_quantity}}件行李/ {{vc.passenger_quantity}}座位/ {{vc.air_condition_in ? '含空调' : '不含空调'}}/ {{vc.model_code_type === 'B' ? '2门' : vc.model_code_type === 'C' ? '2或4门' : '4门或5门'}}</div>
                <div class="price-box">

<!--                  <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country}}" class="price-item">
                    <div class="title">官方零售价：</div>
                    <div class="price">{{'$' + Math.ceil(vc.total_amount/100) + '.00'}}</div>
                  </router-link >-->

                  <!--登录预付-->
                  <div v-if="result.carsSearch && result.carsSearch.type && result.carsSearch.type === 'PREPAY' && $store.getters.getMobile">
                    <div v-if="!vc.empty_price2">
                      <a href="javascript:void(0)" class="price-item">
                        <div class="title">官方零售价：</div>
                        <div class="price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].destination_price)}}.00</div>
                      </a>
                      <div v-show="priceStatu" v-if="$store.getters.getMobile" style="display: inline-block;">
                        <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country, ra: result.vehiclePrices[vc.uuid].destination_price, raType: {totalAmount: vc.total_amount2,esimatedTotalAmount: vc.esimatedTotalAmount2 ,setId: vc.set2_id, name: '浮动价', price: '￥' + Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price) + '.00'}}}" class="price-item" v-if="result.vehiclePrices[vc.uuid].dymanic_price < result.vehiclePrices[vc.uuid].prepaid_price">
                          <div class="title">浮动价：</div>
                          <div v-if="result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price * (1 + result.agent.rate* 0.01))}}.00</div>
                          <div v-if="!result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price)}}.00</div>
                        </router-link>
                        <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country, ra: result.vehiclePrices[vc.uuid].destination_price, raType: {totalAmount: vc.total_amount, esimatedTotalAmount: vc.esimatedTotalAmount ,setId: vc.set1_id, name: '常规价', price: '￥' + Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price) + '.00'}}}" class="price-item" v-if="(result.country.code === 'US' || result.country.code === 'CA' || result.country.code === 'US,CA') && result.vehiclePrices[vc.uuid].prepaid_price < result.vehiclePrices[vc.uuid].dymanic_price">
                          <div class="title">常规价：</div>
                          <div v-if="result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price * (1 + result.agent.rate* 0.01))}}.00</div>
                          <div v-if="!result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price)}}.00</div>
                        </router-link>
                      </div>

                    </div>
                    <div v-if="vc.empty_price2">
                      <a href="javascript:void(0);" class="price-item">
                        <div class="title">官方零售价：</div>
                        <div class="price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].destination_price)}}.00</div>
                      </a>
                      <div v-show="priceStatu" v-if="$store.getters.getMobile" style="display: inline-block;">
                        <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country, ra: result.vehiclePrices[vc.uuid].destination_price, raType: {totalAmount: vc.total_amount, esimatedTotalAmount: vc.esimatedTotalAmount ,setId: vc.set1_id, name: '浮动价', price: '￥' + Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price) + '.00'}}}" class="price-item" v-if="result.vehiclePrices.set1_pay_type !== 'COMMON_PERPAY' && result.vehiclePrices[vc.uuid].dymanic_price">
                          <div class="title">浮动价：</div>
                          <div v-if="result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price * (1 + result.agent.rate* 0.01))}}.00</div>
                          <div v-if="!result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].dymanic_price)}}.00</div>

                        </router-link>
                        <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country, ra: result.vehiclePrices[vc.uuid].destination_price, raType: {totalAmount: vc.total_amount, esimatedTotalAmount: vc.esimatedTotalAmount ,setId: vc.set1_id,  name: '常规价', price : '￥' + Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price) + '.00'}}}" class="price-item" v-if="(result.country.code === 'US' || result.country.code === 'CA' || result.country.code === 'US,CA') && vc.set1_pay_type === 'COMMON_PERPAY'">
                          <div class="title">常规价：</div>
                          <div  v-if="result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price * (1 + result.agent.rate* 0.01))}}.00</div>
                          <div  v-if="!result.agent.rate" class="price current-price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].prepaid_price)}}.00</div>

                        </router-link>
                      </div>
                    </div>
                  </div>

                  <!--未登录预付-->
                  <div v-if="result.carsSearch && result.carsSearch.type && result.carsSearch.type === 'PREPAY' && !$store.getters.getMobile">
                    <div>
                      <span @click="gotoLoginPage" class="price-item" style="cursor: pointer">
                        <div class="title">官方零售价：</div>
                        <div class="price">￥{{Math.ceil(result.vehiclePrices[vc.uuid].destination_price)}}.00</div>
                      </span>
                    </div>
                  </div>

                  <!-- 登录到付 -->
                  <div v-if="result.carsSearch && result.carsSearch.type && result.carsSearch.type === 'ARRIVEPAY' && $store.getters.getMobile">
                    <a href="javascript:void(0);" class="price-item">
                      <div class="title">官方零售价：</div>
                      <div class="price">{{result.exchangeRates[vc.currency_code].currency_symbol}}{{result.vehiclePrices[vc.uuid].destination_price}}</div>
                    </a>
                    <div v-show="priceStatu" v-if="$store.getters.getMobile" style="display: inline-block;">
                      <router-link :to="{ name: 'product', params: {vehicleCore: vc, carSearch: result.carsSearch, vehiclePrices: result.vehiclePrices, country: result.country, ra: result.vehiclePrices[vc.uuid].destination_price, raType: {totalAmount: vc.total_amount, esimatedTotalAmount: vc.esimatedTotalAmount ,setId: vc.set1_id, name: '代理返佣', price: result.exchangeRates[vc.currency_code].currency_symbol + result.vehiclePrices[vc.uuid].agent_commission.toFixed(2)}}}" class="price-item">
                        <div class="title">代理返佣：</div>
                        <div class="price current-price">{{result.exchangeRates[vc.currency_code].currency_symbol}}{{result.vehiclePrices[vc.uuid].agent_commission.toFixed(2)}}</div>
                      </router-link>
                    </div>
                  </div>

                  <!--未登录到付-->
                  <div v-if="result.carsSearch && result.carsSearch.type && result.carsSearch.type === 'ARRIVEPAY' && !$store.getters.getMobile">
                    <span @click="gotoLoginPage" class="price-item" style="cursor: pointer">
                      <div class="title">官方零售价：</div>
                      <div class="price">{{result.exchangeRates[vc.currency_code].currency_symbol}}{{result.vehiclePrices[vc.uuid].destination_price}}</div>
                    </span>
                  </div>

<!--                  <a href="javascript:void(0);" class="price-item" v-if="sets[0].pay_type === 'ARRIVEPAY'">
                    <div class="title">官方零售价：</div>
                    <div class="price">{{orderData.exchangeRate.currency_symbol + Math.ceil(orderData.order.retail_amount/100) + '.00'}}</div>
                  </a>
                  <a href="javascript:void(0);" class="price-item" v-if="sets[0].pay_type === 'ARRIVEPAY'">
                    <div class="title">代理返佣：</div>
                    <div class="price color-brown">{{orderData.exchangeRate.currency_symbol + Math.ceil(orderData.order.agent_commission) + '.00'}}</div>
                  </a>
                  <a href="javascript:void(0);" class="price-item" v-if="sets[0].pay_type === 'PREPAY'">
                    <div class="title">官方零售价：</div>
                    <div class="price">{{'￥' + Math.ceil(orderData.order.retail_amount/100) + '.00'}}</div>
                  </a>
                  <a href="javascript:void(0);" class="price-item" v-if="sets[0].pay_type === 'PREPAY'">
                    <div class="title">代理{{orderData.set.pay_type === 'FLOAT_PREPAY' ? '浮动' : '常规'}}价：</div>
                    <div class="price color-brown">{{'￥' + Math.ceil(orderData.order.cny_pay_price) + '.00'}}</div>
                  </a>
                 -->

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <b-modal
      id="countryModal"
      centered
      v-model="countryShow"
      size="lg"
      title="选择国家"
      :options="countriesOptions"
      @cancel="resetModal"
      @close="resetModal"
    >
      <div class="cities-list">
        <div class="city-letter" v-b-scrollspy:country-scroller>
          <a :href="'#'+key"
            v-for="(item, key) in countriesOptions"
            :key="item.index" @click="selectCitiesLetter(key)"
            class="item"
            v-bind:class="{ active: key === currentLetter}"
          >{{key}}</a>
        </div>
        <div class="city-box" id="country-scroller">
          <div v-for="(item, index) of countriesOptions" :key="index" class="city-group">
            <div class="letter" :id="index" >{{index}}</div>
            <div class="item"
              v-for="(cityItem, id) in item"
              :key="cityItem.chinese_name"
              :data-country-id="cityItem.id"
              :data-country-code="cityItem.code"
              :data-country-name="cityItem.chinese_name"
              :data-suppliers="cityItem.suppliers"
              :class="{ selected: (index == currentCountryIndex && id == currentCountryId) }"
              @click.stop="bindSelectCountry(index, id, $event)"
            >
              {{cityItem.chinese_name}}
              <small>{{cityItem.english_name}}</small>
            </div>
          </div>
        </div>
      </div>
    </b-modal>
    <b-modal
      ref="city-modal"
      id="city-modal"
      centered
      size="lg"
      title="选择热门城市"
      :options="hotLocations"
    >
      <div class="cities-list" style="padding: 10px 30px 20px;">
        <div class="input-group" style="margin-bottom: 10px;">
          <input
            @focus="hotCityShow=true"
            @blur="hotCityShow= (searchCityVal.length < 1) ? false: true"
            @keyup.enter ="searchCity"
            v-model.trim="searchCityVal"
            type="text"
            class="form-control"
            placeholder=""
            aria-describedby="basic-addon1"
          >
          <div class="input-group-append" @click.stop="searchCity">
            <span class="input-group-text" id="basic-addon1"><i class="iconfont icon-search"></i></span>
          </div>
        </div>

        <div class="city-box" v-if="!hotCityShow && Object.keys(hotLocations).length < 1">
          <div class="">热门城市</div>
          <p class="text-center">无热门城市</p>
        </div>
        <div class="city-box" v-if="!hotCityShow && Object.keys(hotLocations).length >= 1">
          <div class="">热门城市</div>
          <div v-for="(item, index) in hotLocations" :key="index" v-show="true" class="city-group">
            <div class="letter">{{index}}</div>
            <div class="item"
              v-for="(cityItem, id) in item"
              :key="cityItem.name"
              :data-city-code="cityItem.country"
              :data-city-zname="cityItem.chineseCityName"
              :data-city-name="cityItem.name"
              :data-city-id="cityItem.id"
              :class="{ selected: (currentShowModal === 'pickup' ? (id == currentCityId && index == currentCityIndex) : (id == returnCurrentCityId && index == returnCurrentCityIndex)) }"
              @click.stop="bindSelectCity(index, id, $event)"
            >  {{cityItem.chineseCityName}}
              <small>{{cityItem.name}}</small>
            </div>
          </div>
        </div>
        <div class="city-box" v-else-if="hotCityShow && Object.keys(searchCityData).length >= 1">
          <div class="list">
            <div class="item row" v-for="(item, index) in searchCityData" :key="index"
              :data-city-code="item.country"
              :data-city-zname="item.chineseCityName"
              :data-city-name="item.name"
              :data-city-id="item.id"
              :class="{ selected: (index ==  (currentShowModal === 'pickup') ? currentSearchCityIndex : returnCurrentSearchCityIndex) }"
              @click.stop="bindSearchCity(index, $event)"
            >
              <div class="col">
                <div class="city-name">{{item.name}}</div>
                <div class="city-address">{{item.address1}}</div>
                <div class="info">TEL: {{item.phone}}&nbsp;&nbsp;{{item.country}}&nbsp;&nbsp;{{item.cityName}}</div>
              </div>
              <div v-if="item.isAirport" class="col-3 d-flex justify-content-center align-items-center">
                <span class="iconfont icon-airplane"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="city-box" v-else-if="hotCityShow && Object.keys(searchCityData).length < 1">
          <p class="text-center">无搜索结果</p>
        </div>
      </div>
    </b-modal>
  </div>
</template>

<script src="./search-result.js"></script>
<style scoped>
  .datetimepickr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: initial !important;
    height: 100%;
    opacity: 1 !important;
    z-index: 1;
    color: #ffff !important;
  }

  .form-control:disabled,
  .form-control[readonly] {
    background: transparent !important;
  }

  .search-tab .item {
    padding: 0 !important;
    height: 38px;
  }

  .v-select,
  .v-select >>> .vs__dropdown-toggle,
  .v-select >>> .vs__selected-options {
    height: 100%;
  }

  .v-select >>> .vs__search::-webkit-input-placeholder {
    color: #fff !important;
    font-size: 13px;
  }

  .v-select >>> .vs__selected {
    display: block !important;
    margin-top: 0 !important;
    width: 100%;
    height: 32px;
    line-height: 28px !important;
    text-align: left;
    color: #fff !important;
    font-size: 13px;
  }

  .search-tab .v-select >>> .vs__selected {
    color: #a1781e !important;
  }

  .v-select >>> .vs__search {
    position: absolute;
    left: 0;
    width: 100% !important;
    height: 100%;
    margin-top: 0;
    z-index: 0;
  }

  .current-price {
    font-weight: bold;
    color: #b39364 !important;
  }
</style>

<style>
  .search-tab .vs__actions {
    display: block !important;
  }
</style>
